<template>
	<view class="wrpper">
		<view v-if="dataList.length !== 0" class="container">
			<view class="card" v-for="(item, index) in dataList" :key="item.id" @click="goVideo(item)">
				<view class="header">
					<view class="title">{{item.title}}</view>
					<!-- <view :class="item.status == '1' ? 'success_status' : 'error_status'">{{ item.status == '1' ? '正在进行中' : '已结束' }}</view> -->
				</view>
				<view class="content">
					创建时间：{{item.create_time}}
				</view>
			</view>
		</view>

		<view v-else class="tips">
			<text :style="{color: '#595959'}">当前暂无消息</text>
		</view>
	</view>
</template>

<script>
	import StatusBar from "@/components/StatusBar.vue";
	import {
		getMessage
	} from "@/api/message/index.js";
	import permision from "@/static/js/permission.js";
	export default {
		components: {
			StatusBar,
		},
		data() {
			return {
				page: 1,
				pageSize: 10,
				user: uni.getStorageSync("user"),
				dataList: [],
			};
		},
		onLoad() {
			this.getMessage();
		},
		onShow() {
			this.getMessage();
		},
		methods: {
			getMessage() {
				const data = {
					uid: this.user.id,
					pageNo: this.page,
					pageSize: this.pageSize,
				};
				getMessage(data).then((res) => {
					const list = res.data || []
					this.dataList = list.map((item) => {
						const search = '?' + decodeURIComponent(item.url).split("?")[1];
						return {
							...item,
							type: "1",
							roomName: this.getURLParams(search, "roomName"),
							confrId: item.meeting_id,
						};
					});
				});
			},

			getURLParams(search, key) {
				var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
				var r = search.substr(1).match(reg); // 匹配目标参数
				if (r != null) return unescape(r[2]);
				return null; // 返回参数值
			},
			async goVideo({
				confrId,
				roomName
			}) {
				// #ifdef APP-PLUS
				// 获取摄像头权限
				await permision.requestAndroidPermission("android.permission.CAMERA");
				// 获取麦克风权限
				await permision.requestAndroidPermission("android.permission.RECORD_AUDIO");
				// #endif
				uni.navigateTo({
					url: `/pages/video/video?roomName=${roomName}&confrId=${confrId}`,
					fail(error) {
						console.log(error);
					},
				});
			},
		},
	};
</script>

<style scoped>
	.wrpper {
		flex: 1;
	}
	.container {
		padding-bottom: 20px;
	}
	.card {
		color: #303133;
		margin: 20px 20px;
		border-radius: 8px;
		border:1px solid #E4E7ED;
		overflow:hidden;
		transition: .3s;
		box-sizing: border-box;
		box-shadow:0 2px 12px 0 rgba(0, 0, 0, .1)
	}
	
	.card .header {
		display: flex;
		padding: 20px 18px;
		border-bottom: 1px solid #E4E7ED;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.card .header .title {
		display: inline-flex;
		color: #303133;
	}
	
	.card .header .success_status {
		display: inline-flex;
		font-size: 12px;
		color: #67C23A;
	}
	
	.card .header .error_status {
		display: inline-flex;
		font-size: 12px;
		color: #F56C6C;
	}

	.card .content {
		padding: 20px;
	}
	.tips {
		padding-top: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
